<template>
  <div class="top">
    <div class="title">
      <div class="home" @click="$router.push('/')">
        <i class="iconfont icon-sun home" />
        <span class="home">新中地天气</span>
      </div>

      <div class="info" v-if="ipCity">
        <span class="city">{{ ipCity }}</span>
        <span class="nowWeather"
          >实时天气: {{ ipWeatherLives.weather }}
          {{ ipWeatherLives.temperature }}℃</span
        >
        <span class="nowWeather"
          >{{ ipWeatherLives.winddirection }}风{{
            ipWeatherLives.windpower
          }}级</span
        >
      </div>
    </div>
    <div class="icon">
      <i class="iconfont icon-infor" @click="updateAbout"></i>
      <i
        v-if="showAddButton"
        class="iconfont icon-plus"
        @click="storageCtiy(city)"
      ></i>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'

import { useWeatherStore } from '@/stores/weather.js'

const store = useWeatherStore()
const { ipCity, ipWeatherLives } = storeToRefs(store)
const { updateAbout, storageCtiy, searchCityExist } = store
const route = useRoute()

const isHomePage = computed(() => route.name === 'home')
const city = computed(() => route.query.adcode)

const showAddButton = computed(() => {
  return !isHomePage.value && city.value && !searchCityExist(city.value)
})
// onMounted((city) => {
//   searchCityExist(city)
// })
//备用
// import { getIpCity, getAdcodeWeather } from '@/api'
// const res = ref({})
// const ipCity = ref('')
// const ipWeather = ref('')
// onMounted(async () => {
// res.value = await getIpCity()
//   console.log(res.value)
// ipCity.value = res.value.city

//   ipWeather.value = await getAdcodeWeather(res.value.adcode, 'all')
// ipWeather.value = (await getAdcodeWeather(res.value.adcode, 'base')).lives[0]
//   console.log(ipWeather.value.lives[0].weather)
//   console.log(ipWeather.value)
// })
</script>

<style lang="scss" scoped>
@import '//at.alicdn.com/t/c/font_4920807_wt0cbrjqy5b.css';
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 24px 160px;
  .icon {
    display: flex;
    gap: 10px;
    i {
      font-size: 20px;
      cursor: pointer;
      transition: all 1s ease;
      &:hover {
        color: #004e71;
      }
    }
  }
  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    .home {
      cursor: pointer;
      display: flex;
      gap: 10px;
    }
    i {
      font-size: 24px;
    }
    .info {
      display: flex;
      align-items: baseline;
      gap: 10px;
      .city {
        font-size: 18px;
      }
      .nowWeather {
        font-size: 14px;
      }
    }
  }
}
</style>
